<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>Document</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/lx/xcfafang.css}">
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script th:src="@{/js/lx/dataDetails.js}"></script>
</head>

<body>
<div class="xcbox">
    <div class="xcbox2">
        <input type="hidden" class="input-nian" th:value="${nian}"/>
        <table class="layui-table table-sd">
            <tr>
                <td>部门</td>
                <td>全部（人数）</td>
                <td>博士（人数）</td>
                <td>硕士（人数）</td>
                <td>本科（人数）</td>
                <td>专科（人数）</td>
            </tr>
            <tr th:each="sj:${data}">
                <td th:text="${sj.getBrName()}" class="table-bm"></td>
                <td th:text="${sj.getTotal()}"></td>
                <td th:text="${sj.getDoctor()}" class="table-bo"></td>
                <td th:text="${sj.getMaster()}" class="table-so"></td>
                <td th:text="${sj.getRegular()}" class="table-zk"></td>
                <td th:text="${sj.getJunior()}" class="table-bk"></td>
            </tr>
        </table>
    </div>
    <div class="xcbox3">
        <button type="button" class="layui-btn layui-btn-primary" onclick="shanyiji()">返回</button>
    </div>
    <div id="main" style="width: 98%;height:400px;"></div>
</div>
<script>
    let nian = $(".input-nian").val()
    //

    // let b1=[]
    // $(".table-bo").each(function (i,v) {
    //     b1[i]=$(this).text()
    // })
    // console.log(b1)
    let bs = $(".table-bo").text()
    let so = $(".table-so").text()
    let bk = $(".table-bk").text()
    let zk = $(".table-zk").text()
    let bm = []
    $(".table-bm").each(function (i,v) {
        bm[i] = $(this).text()
    })

    var myChart = echarts.init(document.getElementById('main'));

    // option = {
    //     title: {
    //         text: nian+'员工学历水平概览',
    //         left: 'center'
    //     },
    //     tooltip: {
    //         trigger: 'item',
    //         formatter: '{a} <br/>{b} : {c} ({d}%)'
    //     },
    //     legend: {
    //         top: 'bottom'
    //     },
    //     toolbox: {
    //         itemSize:20,
    //         show: true,
    //         feature: {
    //             mark: { show: true },
    //             dataView: { show: true, readOnly: true,
    //
    //                 lang: ["数据视图", "关闭", "刷新"]
    //             },
    //             restore: { show: true },
    //             saveAsImage: { show: true }
    //         }
    //     },
    //     series: [
    //         {
    //             name: '',
    //             type: 'pie',
    //             radius: [50, 150],
    //             center: ['50%', '50%'],
    //             roseType: 'area',
    //             itemStyle: {
    //                 borderRadius: 8
    //             },
    //             data: [
    //                 {value:bs, name: '博士'},
    //                 {value:so, name: '硕士'},
    //                 {value:bk, name: '本科'},
    //                 {value:zk, name: '专科'},
    //             ],
    //         }
    //     ]
    // };

    let option = {
        title: {
            text: nian+'年度员工学历'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x:'center',
            y:'3%',

        },
        grid: {
            left: '3%',
            right: '4%',
            top:'10%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:bm
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '博士',
                type: 'line',
                stack: 'Total',
                data: bs
            },
            {
                name: '硕士',
                type: 'line',
                stack: 'Total',
                data: so
            },
            {
                name: '本科',
                type: 'line',
                stack: 'Total',
                data: bk
            },
            {
                name: '专科',
                type: 'line',
                stack: 'Total',
                data: zk
            }
        ]
    };
    myChart.setOption(option)

</script>
</body>

</html>